﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>荣车宝</title>
    <link rel="stylesheet" type="text/css" href="css/base.css"/>
    <link rel="stylesheet" type="text/css" href="css/home.css"/>
    <link rel="stylesheet" type="text/css" href="city/city.css">
    <style>
        .shopping-cart{
            border: none;
            margin-left: 40px;
            width: 100px;
            height: 32px;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript" src="script/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="script/home_ban.js"></script>
    <script type="text/javascript" src="script/eg_top_search.js"></script>
    <script type="text/javascript" src="script/city.js"></script>
    <script type="text/javascript" src="script/snncar.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.navmenu li').hover(function () {
                $('span', this).stop().css('height', '2px');
                $('span', this).animate({
                    left: '0',
                    width: '100%',
                    right: '0'
                }, 200);
            }, function () {
                $('span', this).stop().animate({
                    left: '50%',
                    width: '0'
                }, 200);
            });
        });
    </script>
    <!--导航登陆网页版下拉-->
    <script type="text/javascript">
        $(function () {
            var setTime;
            $(".egc-top .nav-cent .operate").hover(function () {
                var _this = $(this);
                setTime = setTimeout(function () {
                    _this.find(".sec-version").slideDown(200);
                    _this.find("i").removeClass("icon-angle-down").addClass("icon-angle-up");
                }, 200);
            }, function () {
                if (setTime) {
                    clearTimeout(setTime);
                }
                $(".egc-top .nav-cent .sec-version").slideUp(200);
                $(".egc-top .nav-cent .operate i").removeClass("icon-angle-up").addClass("icon-angle-down");
            });
        });
    </script>
    <!--底部信息下拉-->
    <script type="text/javascript">
        $(function () {
            var wind_wd = $(window).width();
            if (wind_wd <= 735) {
                /* $submenu.first().delay(400).slideDown(700);*/
                $('.relate .tit').on('click', function () {
                    $(this).next('.con').slideToggle()
                    $(this).parent().siblings('.items').find('.con').slideUp();
                });
            } else {
                $('.relate .tit').unbind("click");
                $('.relate .con').show();
            }
            $(window).resize(function () {
                var wind_wd = $(window).width();
                if (wind_wd <= 735) {
                    /* $submenu.first().delay(400).slideDown(700);*/
                    $('.relate .tit').on('click', function () {
                        $(this).next('.con').slideToggle()
                        $(this).parent().siblings('.items').find('.con').slideUp();
                    });
                } else {
                    $('.relate .tit').unbind("click");
                    $('.relate .con').show();
                }
            });
        });
    </script>

    <!--搜搜框获取焦点-->
    <script type="text/javascript">
        $(function () {
            $('.sea-ipt-txt').focus(function () {
                $(this).addClass("on");
                $('.search-btn').addClass("on");
            });
            $('.sea-ipt-txt').blur(function () {
                $(this).removeClass("on");
                $('.search-btn').removeClass("on");
            });
        });
    </script>
    <!--下拉导航关闭-->
    <script type="text/javascript">
        $(function () {
            $('.menu-mb i').click(function () {
                $(".navigation-mb-list").slideDown(300);
            });
            $('.navigation-mb-list .list-close-btn').click(function () {
                $(".navigation-mb-list").slideUp(300);
            });
        });
    </script>
    <!--stress搜索关闭-->
    <script type="text/javascript">
        $(function () {
            var setTime;
            $(".sercat .weixin").hover(function () {
                setTime = setTimeout(function () {
                    $(".sercat .wxewm").show();
                }, 300);
            }, function () {
                if (setTime) {
                    clearTimeout(setTime);
                }
                $(".sercat .wxewm").hide();
            });
        });
    </script>
    <script type="text/javascript">
        $(function () {
            var scroll_heitht = $('body').offset().top;
            var isShow = true;
            $(window).scroll(function () {
                if ($(window).scrollTop() > scroll_heitht && isShow) {
                    $('.stress-search-box').slideDown(200);
                } else {
                    $('.stress-search-box').slideUp(200);
                }
            });
            $('.stress-close a').click(function () {
                isShow = false;
                $('.stress-search-box').slideUp(200).unbind(window, aa);
            });
        });
    </script>
    <script src="script/vue.js"></script>
    <script src="script/axios.js"></script>
    <script src="comment/main.js"></script>
</head>
<body>
<div id="app">
    <div class="egc-top">
        <div class="nav-cent">
            <div class="top-r"><a href="javascript:void(0)" id="b-regist">注册</a>|<a href="javascript:void(0)"
                                                                                      id="b-login"
                                                                                      class="b-login">登陆</a>
            </div>
            <div class="top-l">全国统一客服热线：XXX&nbsp;&nbsp;&nbsp;&nbsp;<span @click="getMyLocation()" style="cursor: pointer;">点击获取我的位置</span></div>
            <div class="clear_fix"></div>
        </div>
    </div>
    <div class="navigation">
        <div class="nav-cent">
            <div class="logo"><a href="index.html"><img src="images/logo.png" width="240"/></a></div>
            <div class="city"><span id="DY_site_name" class="red city-name Left">合肥</span>
                <div id="JS_hide_city_menu_11" class="city-select cut_handdler Left"><a href="javascript:void(0);"
                                                                                        class="common-bg selector">切换城市</a>
                    <div id="JS_header_city_bar_box" class="hide_city_group">
                        <div class="hideMap">
                            <div class="showPanel clearfix">
                                <div class="Left mycity">
                                    <div id="JS_current_city_box"> 当前城市：<strong
                                            id="JS_city_current_city">合肥</strong>
                                    </div>
                                    <div id="JS_default_city_delete" style="display: none;"></div>
                                </div>
                            </div>
                            <div class="showPanel showPanel2 clearfix">
                                <div class="hot_city" id="JS_header_city_hot"></div>
                                <div class="city_words mt10" id="JS_header_city_char"></div>
                            </div>
                            <div class="scrollBody">
                                <div class="cityMap clearfix">
                                    <table id="JS_header_city_list" class="city_list" style="margin-top: 0px;">
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="scrollBar"><span id="JS_header_city_bar" style="margin-top: 0px;"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <span class="common-bg city-logo"></span></div>
            <div class="sea">
                <div class="egc-sea-box">
                    <input type="text" class="sea-ipt-txt" placeholder="搜索您想要的车" v-model="carSearchQuery.keyword"/>
                    <a href="javascript:void(0)" class="search-btn" @click="searchCar">搜索</a></div>
            </div>
            <div class="hot-phone"><i></i> <span class="js-change-phone">XXX</span></div>
        </div>
    </div>
    <ul class="navmenu">
        <li><a href="index.html">首页</a><span></span></li>
        <li class="active"><a href="list.html">我要买车</a><span></span></li>
        <li><a href="wymc.html">汽车服务</a><span></span></li>
        <li><a href="javascript:void(0)">汽车保险</a><span></span></li>
        <li><a href="javascript:void(0)">汽车百科</a><span></span></li>
    </ul>
    <div class="clear_fix"></div>
    <div class="stress-search-box row">
        <div class="stress-close"><a href="javascript:;"></a></div>
        <div class="nav-cents">
            <ul>
                <li class="logo"><a href="index.html"><img src="images/logo.png" width="180"/></a></li>
                <li><a href="index.html">首页</a></li>
                <li><a href="list.html">我要买车</a></li>
                <li><a href="wymc.html">我要卖车</a></li>
                <li><a href="javascript:void(0)">阳光联盟</a></li>
                <li><a href="javascript:void(0)">我要加盟</a></li>
            </ul>
            <div class="seas">
                <div class="egc-sea-box">
                    <input type="text" class="sea-ipt-txt" placeholder="搜索您想要的车">
                    <a href="javascript:void(0)" class="search-btn">搜索</a></div>
            </div>
        </div>
    </div>
    <div class="clear_fix"></div>
    <!--所在位置-->
    <div class="crumbp"><a href="javascript:void(0)">首页</a> <em>&gt;</em> <span>个人二手车</span></div>
    <div class="mainbox">
        <!--搜索条件-->
        <div class="comfilter-bd">
            <div class="filterBox">
                <dl class="fliter-bd clearfix">
                    <dt>品牌：</dt>
                    <dd class="clickBrandWidget">
                        <a :class="carSearchQuery.carType == null?'on':''" :car-type="null" href="javascript:void(0)"
                           @click="checkCarType($event)">不限</a>
                        <a :class="carSearchQuery.carType == type.id ? 'on' : ''"
                           href="javascript:void(0)" :car-type="type.id" @click="checkCarType($event)"
                           :title="type.name" v-for="type in pageInfo.data.typeIdAggs">{{type.name}} </a>
                    </dd>
                </dl>
                <dl class="fliter-bd clearfix">
                    <dt>店铺：</dt>
                    <dd class="clickTagWidget">
                        <a :class="carSearchQuery.shopId == null?'on':''"
                           href="javascript:void(0)"  :shop-id="null"
                           @click="searchShop($event)">不限</a>
                        <a :class="carSearchQuery.shopId == shop.id ? 'on' : ''"
                           href="javascript:void(0)"
                           v-for="shop in pageInfo.data.shopIdAggs"
                           :shop-id="shop.id" @click="searchShop($event)"
                           :title="shop.name">{{shop.name}} </a>
                    </dd>
                </dl>
                <dl class="fliter-bd clearfix">
                    <dt>价格：</dt>
                    <dd><a :class="carSearchQuery.minPrice==null&&carSearchQuery.maxPrice==null?'on':''"
                           href="javascript:void(0)" @click="changePrice(null,null)">不限</a>
                        <a :class="carSearchQuery.minPrice==0&&carSearchQuery.maxPrice==30000?'on':''"
                           href="javascript:void(0)" @click="changePrice(0,30000)" title="3万以下二手车"> 3万以下 </a>
                        <a :class="carSearchQuery.minPrice==30000&&carSearchQuery.maxPrice==50000?'on':''"
                           href="javascript:void(0)" @click="changePrice(30000,50000)" title="5万以下二手车">3-5万 </a>
                        <a :class="carSearchQuery.minPrice==50000&&carSearchQuery.maxPrice==70000?'on':''"
                           href="javascript:void(0)" @click="changePrice(50000,70000)" title="7万以下二手车"> 5-7万 </a>
                        <a :class="carSearchQuery.minPrice==70000&&carSearchQuery.maxPrice==90000?'on':''"
                           href="javascript:void(0)" @click="changePrice(70000,90000)" title="9万以下二手车">7-9万 </a>
                        <a :class="carSearchQuery.minPrice==90000&&carSearchQuery.maxPrice==120000?'on':''"
                           href="javascript:void(0)" @click="changePrice(90000,120000)" title="12万以下二手车">
                            9-12万 </a>
                        <a :class="carSearchQuery.minPrice==120000&&carSearchQuery.maxPrice==160000?'on':''"
                           href="javascript:void(0)" @click="changePrice(120000,160000)"
                           title="16万以下二手车">12-16万 </a>
                        <a :class="carSearchQuery.minPrice==160000&&carSearchQuery.maxPrice==200000?'on':''"
                           href="javascript:void(0)" @click="changePrice(160000,200000)" title="20万以下二手车">
                            16-20万 </a>
                        <a :class="carSearchQuery.minPrice==200000&&carSearchQuery.maxPrice==null?'on':''"
                           href="javascript:void(0)" @click="changePrice(200000,null)"
                           title="20万以上二手车">20万以上 </a>
                        <span class="input-box clearfix rangeFilter">
                            <label>
                                <input type="text" value="0" v-model="carSearchQuery.minPrice" data-default-value="0"
                                       size="4" class="js-begin" maxlength="3" id="my_price_b" name="b">
                              </label>
                              <label><i class="input-line">-</i></label>
                              <label>
                                <input type="text" value="" v-model="carSearchQuery.maxPrice" data-default-value="999"
                                       size="4" class="js-end" maxlength="3" id="my_price_e" name="e">
                              </label>
                              <label class="input-unit">万</label>
                              <label><a gjalog="" href="javascript:void(0)" @click="searchPrice"
                                        class="input-btn js-btn">筛选</a>
                            </label>
                        </span>
                    </dd>
                </dl>
                <dl class="fliter-bd clearfix">
                    <dt>车龄：</dt>
                    <dd><a data-role="filterItemAge" data-value="" @click="changeCarAge(null,null)"
                           :class="carSearchQuery.carAge==null&&carSearchQuery.carAgeType==null?'on':''"
                           href="javascript:void(0)">不限</a>
                        <a :class="carSearchQuery.carAge==5&&carSearchQuery.carAgeType==1?'on':''"
                           href="javascript:void(0)" @click="changeCarAge(5,1)" title="5年以上二手车">5年以上 </a>
                        <a :class="carSearchQuery.carAge==5&&carSearchQuery.carAgeType==0?'on':''"
                           href="javascript:void(0)" @click="changeCarAge(5,0)" title="5年内二手车"> 5年内 </a>
                        <a :class="carSearchQuery.carAge==3&&carSearchQuery.carAgeType==0?'on':''"
                           href="javascript:void(0)" @click="changeCarAge(3,0)" title="3年内二手车">3年内 </a>
                        <a :class="carSearchQuery.carAge==1&&carSearchQuery.carAgeType==0?'on':''"
                           href="javascript:void(0)" @click="changeCarAge(1,0)" title="1年以内二手车"> 1年以内 </a>
                    </dd>
                </dl>
                <div class="moreitem clearfix">
                    <span>更多：</span>
                    <dl class="selecter">
                        <dt>车型</dt>
                        <dd>
                            <ul>
                                <li><a href="javascript:void(0);">不限</a></li>
                                <li><a href="javascript:void(0);"> 两厢轿车 </a></li>
                                <li><a href="javascript:void(0);"> 三厢轿车 </a></li>
                                <li><a href="javascript:void(0);"> 跑车 </a></li>
                                <li><a href="javascript:void(0);"> SUV </a></li>
                                <li><a href="javascript:void(0);"> MPV </a></li>
                            </ul>
                        </dd>
                    </dl>
                    <dl class="selecter">
                        <dt>座位</dt>
                        <dd>
                            <ul>
                                <li><a href="javascript:void(0);">不限</a></li>
                                <li><a href="javascript:void(0);"> 2座 </a></li>
                                <li><a href="javascript:void(0);"> 4座 </a></li>
                                <li><a href="javascript:void(0);"> 5座 </a></li>
                                <li><a href="javascript:void(0);"> 6座 </a></li>
                                <li><a href="javascript:void(0);"> 7座及以上 </a></li>
                            </ul>
                        </dd>
                    </dl>
                    <dl class="selecter">
                        <dt>行驶里程</dt>
                        <dd>
                            <ul>
                                <li><a href="javascript:void(0);">不限</a></li>
                                <li><a href="javascript:void(0);"> 1万公里内 </a></li>
                                <li><a href="javascript:void(0);"> 3万公里内 </a></li>
                                <li><a href="javascript:void(0);"> 5万公里内 </a></li>
                                <li><a href="javascript:void(0);"> 5万公里以上 </a></li>
                            </ul>
                        </dd>
                    </dl>
                    <dl class="selecter">
                        <dt>变速箱</dt>
                        <dd>
                            <ul>
                                <li><a href="javascript:void(0);">不限</a></li>
                                <li><a href="javascript:void(0);"> 手动 </a></li>
                                <li><a href="javascript:void(0);"> 自动 </a></li>
                            </ul>
                        </dd>
                    </dl>
                    <dl class="selecter">
                        <dt>排量</dt>
                        <dd>
                            <ul>
                                <li><a href="javascript:void(0);">不限</a></li>
                                <li><a href="javascript:void(0);"> 1.0L以下 </a></li>
                                <li><a href="javascript:void(0);"> 1.0-1.6L </a></li>
                                <li><a href="javascript:void(0);"> 1.6-2.0L </a></li>
                                <li><a href="javascript:void(0);"> 2.0-3.0L </a></li>
                                <li><a href="javascript:void(0);"> 3.0L以上 </a></li>
                            </ul>
                        </dd>
                    </dl>
                    <dl class="selecter">
                        <dt>排放标准</dt>
                        <dd>
                            <ul>
                                <li><a href="javascript:void(0);">不限</a></li>
                                <li><a href="javascript:void(0);"> 国二及以上 </a></li>
                                <li><a href="javascript:void(0);"> 国三及以上 </a></li>
                                <li><a href="javascript:void(0);"> 国四及以上 </a></li>
                                <li><a href="javascript:void(0);"> 国五 </a></li>
                            </ul>
                        </dd>
                    </dl>
                    <dl class="selecter">
                        <dt>燃油类型</dt>
                        <dd>
                            <ul>
                                <li><a href="javascript:void(0);">不限</a></li>
                                <li><a href="javascript:void(0);"> 汽油 </a></li>
                                <li><a href="javascript:void(0);"> 柴油 </a></li>
                                <li><a href="javascript:void(0);"> 电动 </a></li>
                                <li><a href="javascript:void(0);"> 油电混合 </a></li>
                                <li><a href="javascript:void(0);"> 其他 </a></li>
                            </ul>
                        </dd>
                    </dl>
                    <dl class="selecter">
                        <dt>颜色</dt>
                        <dd>
                            <ul>
                                <li><a href="javascript:void(0);">不限</a></li>
                                <li><a href="javascript:void(0);"> <i class="c-lump03"></i>黑色 </a></li>
                                <li><a href="javascript:void(0);"> <i class="c-lump04"></i>白色 </a></li>
                                <li><a href="javascript:void(0);"> <i class="c-lump10"></i>银灰色 </a></li>
                                <li><a href="javascript:void(0);"> <i class="c-lump09"></i>红色 </a></li>
                                <li><a href="javascript:void(0);"> <i class="c-lump15"></i>深灰色 </a></li>
                                <li><a href="javascript:void(0);"> <i class="c-lump11"></i>橙色 </a></li>
                                <li><a href="javascript:void(0);"> <i class="c-lump02"></i>绿色 </a></li>
                                <li><a href="javascript:void(0);"> <i class="c-lump05"></i>蓝色 </a></li>
                                <li><a href="javascript:void(0);"> <i class="c-lump06"></i>咖啡色 </a></li>
                                <li><a href="javascript:void(0);"> <i class="c-lump07"></i>紫色 </a></li>
                                <li><a href="javascript:void(0);"> <i class="c-lump08"></i>香槟色 </a></li>
                                <li><a href="javascript:void(0);"> <i class="c-lump12"></i>多彩色 </a></li>
                                <li><a href="javascript:void(0);"> <i class="c-lump13"></i>黄色 </a></li>
                                <li><a href="javascript:void(0);"> <i class="c-lump14"></i>其它 </a></li>
                            </ul>
                        </dd>
                    </dl>
                    <dl class="selecter">
                        <dt>国别</dt>
                        <dd>
                            <ul>
                                <li><a href="javascript:void(0);">不限</a></li>
                                <li><a href="javascript:void(0);"> 德系 </a></li>
                                <li><a href="javascript:void(0);"> 日系 </a></li>
                                <li><a href="javascript:void(0);"> 美系 </a></li>
                                <li><a href="javascript:void(0);"> 法系 </a></li>
                                <li><a href="javascript:void(0);"> 韩系 </a></li>
                                <li><a href="javascript:void(0);"> 国产 </a></li>
                                <li><a href="javascript:void(0);"> 其他 </a></li>
                            </ul>
                        </dd>
                    </dl>
                    <dl class="selecter">
                        <dt>距离</dt>
                        <dd>
                            <ul>
                                <li><a @click="distance(null)" href="javascript:void(0);">不限</a></li>
                                <li><a @click="distance(1)" href="javascript:void(0);"> 1km </a></li>
                                <li><a @click="distance(5)" href="javascript:void(0);"> 5km </a></li>
                                <li><a @click="distance(20)" href="javascript:void(0);"> 20km </a></li>
                                <li><a @click="distance(100)" href="javascript:void(0);"> 100km </a></li>
                                <li><a @click="distance(500)" href="javascript:void(0);"> 500km </a></li>
                                <li><a @click="distance(9600000)" href="javascript:void(0);"> 全国 </a></li>
                                <li><a @click="distance(100000000)" href="javascript:void(0);"> 全球 </a></li>
                            </ul>
                        </dd>
                    </dl>
                </div>

            </div>
            <div class="sel-menu clearfix">
                <p class="sel-p">当前筛选&gt;</p>
                <a href="javascript:void(0)" class="sel-a">大众</a> <a href="javascript:void(0)"
                                                                       class="sel-reset">重置</a>
                <p class="sel-p">共为您找到<b>{{pageInfo.total}}</b>辆好车</p>
            </div>
        </div>
        <div class="seqBox clearfix">
            <p class="fr seqtype">共找到<b>{{pageInfo.total}}</b>辆 </p>
            <ul class="sequen">
                <li class="first"><a href="javascript:void(0)" @click="changeSort($event)">默认排序</a></li>
                <li><a sort-field="onsaletime" sort-type="desc" @click="changeSort($event)" href="javascript:void(0)"
                       title="">最新发布 </a></li>
                <li><a sort-field="costprice" sort-type="asc" @click="changeSort($event)" href="javascript:void(0)"
                       title="">价格<i :class="sortIcon['costprice']"></i> </a></li>
                <li><a sort-field="reigstertime" sort-type="asc" @click="changeSort($event)" href="javascript:void(0)"
                       title="">车龄<i :class="sortIcon['reigstertime']"></i> </a></li>
                <li><a sort-field="mileage" sort-type="asc" @click="changeSort($event)" href="javascript:void(0)"
                       title="">里程<i :class="sortIcon['mileage']"></i> </a></li>
            </ul>
            <ul id="checkArea" class="screen-input tagTypesFilterNew">
                <li>
                    <input type="checkbox" checked other-field="costeffective" @click="sortOtherField($event)" id="chaozhi">
                    <label for="chaozhi">超值</label>
                </li>
                <li>
                    <input type="checkbox" checked other-field="rushsale" @click="sortOtherField($event)" id="jishou">
                    <label for="jishou">急售</label>
                </li>
                <li>
                    <input type="checkbox" checked other-field="quasinewcar" @click="sortOtherField($event)" id="zhunxinche">
                    <label for="zhunxinche">准新车</label>
                </li>
                <li>
                    <input type="checkbox" checked other-field="transitivecountry" @click="sortOtherField($event)" id="keqianquanguo">
                    <label for="keqianquanguo">可迁全国</label>
                </li>
            </ul>
        </div>
        <ul class="carList">
            <li v-for="car in pageInfo.list" @click="openCarDatabase(car.id)">
                <div class="list-infoBox">
                    <a :title="car.title" target="_blank" class="imgtype"
                       href="infor.html">
                        <img width="290" height="194" :src="car.cover" :alt="car.title">
                    </a>
                    <p class="infoBox">
                        <a :title="car.title" href="infor.html" target="_blank" class="info-title">
                            <span v-html="car.title"></span>
                        </a>
                    </p>
                    <p class="fc-gray">
                        <span class="tag-gray">{{car.shopAddress | addressFormat}}</span>
                        <span class="">{{car.reigstertime|dateFormat}}上牌</span>
                        <em class="shuxian">|</em> 行驶{{car.mileage / 10000}}万公里
                    </p>
                    <p class="priType-s">
                        <span>
                            <i class="fc-org priType"> {{car.costprice / 10000}}万 </i>
                        </span> <s>{{car.saleprice / 10000}}万</s>
                        <button class="shopping-cart" @click.stop="addShoppingCart(car)">加入购物车</button>
                    </p>
                </div>
            </li>
        </ul>
    </div>
    <div class="pages">
        <a v-for="item in pageInfo.totalPage" :class="carSearchQuery.currentPage === item ? 'on' : ''"
           href="javascript:void(0)" @click="changePage(item)">{{item}}</a>
    </div>
</div>
<div class="clear_fix"></div>
<!--底部-->
<div class="ftWrap">
    <div class="foot">
        <div class="cent">
            <div class="relate">
                <div class="items">
                    <div class="tit"><i class="icon-angle-right"></i>交易帮助</div>
                    <div class="con"><a href="javascript:void(0)">买车帮助</a> <a href="javascript:void(0)">卖车帮助</a>
                        <a href="javascript:void(0)">过户帮助</a></div>
                </div>
                <div class="items">
                    <div class="tit"><i class="icon-angle-right"></i>客服中心</div>
                    <div class="con"><a href="abut.html">网站合作</a> <a href="about.html">关于我们</a> <a
                            href="contact.html">联系我们</a></div>
                </div>
                <div class="items">
                    <div class="tit"><i class="icon-angle-right"></i>购车指南</div>
                    <div class="con"><a href="javascript:void(0)">购车帮助</a></div>
                </div>
                <div class="app-section"><img class="js-delayed-img" src="images/f_wx.jpg">
                    <div class="title">扫码关注微信</div>
                    <p> 随时随地，秒杀好车<br/>
                        优质个人二手车 </p>
                </div>
                <div class="items last">
                    <div class="tel">
                        <h1>XXX</h1>
                        <p>周一至周日 8:00-18:00</p>
                        <p>免费咨询(咨询、建议、投诉)</p>
                        <a href="javascript:void(0)" class="kf"><i class="kf-icon"></i>在线客服</a></div>
                    <div class="tel-mb">
                        <p><span>XXX</span>周一至周日 8:00-18:00(仅收市话费)</p>
                        <a href="javascript:void(0)" class="kf"><i class="kf-icon"></i>在线客服</a></div>
                </div>
            </div>
        </div>
    </div>
    <div class="copyright">
        <div class="cent"> Copyright © 2020,All Rights Reserved 皖ICP备XXX号-1</div>
    </div>
</div>
<script type="text/javascript" src="script/3c-menu.js"></script>
<script type="text/javascript" src="script/lg_reg.js"></script>
<!--会员登录和注册弹出框开始-->
<div id="popBox">
    <div class="popCont"><a class="p_closed">关闭</a>
        <div class="p-tab"><a>会员登录<i></i></a><a>会员注册<i></i></a></div>
        <div class="p-detail">
            <div class="p-dl">
                <form onsubmit="return check();" enctype="multipart/form-data" method="post" name="form" id="form">
                    <ul class="login-items">
                        <li>
                            <label>用户名(手机号)</label>
                            <input class="input" type="text" value="" maxlength="32" name="username"
                                   placeholder="请输入您的手机号">
                        </li>
                        <li>
                            <label>密码</label>
                            <input class="input" type="password" value="" maxlength="16" name="password">
                        </li>
                    </ul>
                    <div class="login-check">
                        <input type="checkbox" name="checkbox" style=" width:auto;"/>
                        <label>记住我</label>
                        <a href="Meet/editPass">忘记登录密码？</a></div>
                    <div class="login-button">
                        <input type="hidden" value="" name="carid" class="ordercarid"/>
                        <input type="hidden" value="" name="carstatus" class="orderstatus"/>
                        <input type="button" value="登&nbsp;&nbsp;&nbsp;&nbsp;陆" class="fM"
                               onclick="$('#form').submit()"/>
                    </div>
                </form>
            </div>
            <div class="p-dl">
                <form class="registForm" onsubmit="return regcheck();" enctype="multipart/form-data" method="post"
                      name="reg" id="reg">
                    <ul class="login-items">
                        <li class="clearfix">
                            <input class="input" name="mobile" id="mobile" type="text" value=""
                                   placeholder="手机号码（登录帐号）">
                        </li>
                        <li class="clearfix">
                            <input class="input left" type="text" value="" name="verify" placeholder="输入验证码"
                                   style="width:100px;"/>
                            <div id="send"><a href="javascript:void(0)" class="send_code right">获取验证码</a></div>
                        </li>
                        <li class="clearfix">
                            <input class="input" type="text" value="" name="realname" placeholder="姓名">
                        </li>
                        <li class="clearfix sex">
                            <input type="radio" checked="" name="gender" value="M"/>
                            男&nbsp;&nbsp;&nbsp;&nbsp;
                            <input type="radio" name="gender" value="F"/>
                            女
                        </li>
                        <li class="clearfix">
                            <input id="" class="input" type="password" name="password" value=""
                                   placeholder="输入密码（六位字符）">
                        </li>
                    </ul>
                    <div class="login-button">
                        <input type="hidden" value="" name="carid" class="ordercarid"/>
                        <input type="hidden" value="" name="carstatus" class="orderstatus"/>
                        <input type="button" value="立即注册" class="fM" onclick="$('#reg').submit()"/>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!--会员登录和注册弹出框结束-->
<script>
    $(function () {
        var t = null, $this, i = 0;
        //品牌
        $(".brand-all").bind({
            mouseenter: function () {
                $(this).find(".otherbrand").show();
            },
            mouseleave: function () {
                $(this).find(".otherbrand").hide();
            }
        });

    });
</script>
<script type="text/javascript">
    $(".hoverWidget").each(function () {
        $(this).mouseenter(function () {
            $(this).addClass("active")
        }).mouseleave(function () {
            $(this).removeClass("active")
        })
    });
</script>
<div id="leftsead">
    <ul>
        <li>
            <a id="top_btn">
                <img src="images/foot03/ll06.png" width="47" height="49" class="hides"/>
                <img src="images/foot03/l06.png" width="47" height="49" class="shows"/>
            </a>
        </li>

        <li>
            <a href="">
                <img src="images/foot03/ll03.png" width="47" height="49" class="hides"/>
                <img src="images/foot03/l03.png" width="47" height="49" class="shows"/>
            </a>
        </li>

        <li>
            <a href="">
                <img src="images/foot03/ll02.png" width="166" height="49" class="hides"/>
                <img src="images/foot03/l04.png" width="47" height="49" class="shows"/>
            </a>
        </li>

        <li>
            <a class="youhui">
                <img src="images/foot03/l02.png" width="47" height="49" class="shows"/>
                <img src="images/foot03/zfew.jpg" width="196" height="205" class="hides" usemap="#taklhtml"/>
            </a>
        </li>


    </ul>
</div><!--leftsead end-->


<script type="text/javascript">
    $(document).ready(function () {

        $("#leftsead a").hover(function () {
            if ($(this).prop("className") == "youhui") {
                $(this).children("img.hides").show();
            } else {
                $(this).children("img.hides").show();
                $(this).children("img.shows").hide();
                $(this).children("img.hides").animate({marginRight: '0px'}, 'slow');
            }
        }, function () {
            if ($(this).prop("className") == "youhui") {
                $(this).children("img.hides").hide('slow');
            } else {
                $(this).children("img.hides").animate({marginRight: '-143px'}, 'slow', function () {
                    $(this).hide();
                    $(this).next("img.shows").show();
                });
            }
        });

        $("#top_btn").click(function () {
            if (scroll == "off") return;
            $("html,body").animate({scrollTop: 0}, 600);
        });

    });
</script>
<script type="text/javascript">
    $(function () {
        $(".selecter").each(function () {
            var s = $(this);
            var z = parseInt(s.css("z-index"));
            var dt = $(this).children("dt");
            var dd = $(this).children("dd");
            var _show = function () {
                dd.slideDown(200);
                dt.addClass("cur");
                s.css("z-index", z + 1);
            };   //展开效果
            var _hide = function () {
                dd.slideUp(200);
                dt.removeClass("cur");
                s.css("z-index", z);
            };    //关闭效果
            dt.click(function () {
                dd.is(":hidden") ? _show() : _hide();
            });
            dd.find("a").click(function () {
                dt.html($(this).html());
                _hide();
            });     //选择效果（如需要传值，可自定义参数，在此处返回对应的“value”值 ）
            $("body").click(function (i) {
                !$(i.target).parents(".selecter").first().is(s) ? _hide() : "";
            });
        })
    })
</script>

<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            sortIcon:{
                "costprice":'up',
                "reigstertime":'up',
                "mileage":'up'
            },
            pageInfo: {
                total: 0,
                list: [],
                totalPage: 0,
                data:[]
            },
            carSearchQuery: {
                keyword: '',
                currentPage: 1,
                pageSize: 12,
                carType: null,
                shopId:null,
                minPrice: null,
                maxPrice: null,
                carAge: null,
                carAgeType: null,
                sortField: null,
                sortType: null,
                costeffective: null,
                rushsale: null,
                quasinewcar: null,
                transitivecountry: null,
                accuracy: null,
                latitude: null,
                distance: null,
            },
            longitude:null,
            latitude:null
        },
        methods: {
            // 加入购物车
            addShoppingCart(car){
                // num和state默认都是1，再后台做判断
                let {id,cover,title,typeId,typeName,costprice,shopId,shopName} = car;
                let userId = JSON.parse(localStorage.getItem("loginUser")).id;
                let shopping = {
                    carId:id,
                    cover,
                    title,
                    typeId,
                    typeName,
                    num:1,
                    state:1,
                    costprice,
                    shopId,
                    shopName,
                    userId
                }
                this.$http.put("/shoppingCart",shopping)
                    .then(res=>{
                        res = res.data;
                        if (res.success){
                            alert("加入购物车成功，请前往购物车查看");
                        }else{
                            alert(res.msg);
                        }
                    })
                    .catch(err=>{
                        alert("网络异常");
                    })
            },
            openCarDatabase(id){
                window.open(`carDetails/${id}.html`);
            },
            // 搜索
            searchCar(){
                this.carSearchQuery.currentPage = 1;
                this.getCars();
            },
            // 获取距离
            distance(distance){
                var latitude = sessionStorage.getItem("latitude");
                var accuracy = sessionStorage.getItem("longitude");
                if (latitude==null||accuracy==null){
                    alert("请先获取当前位置");
                    return;
                }
                if (distance!=null){
                    this.carSearchQuery.latitude = latitude;
                    this.carSearchQuery.accuracy = accuracy;
                    this.carSearchQuery.distance = Number.parseFloat(distance);
                    this.getCars();
                }else{
                    this.carSearchQuery.distance = null;
                    this.getCars();
                }
            },
            // 获取我的位置
            getMyLocation() {
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(function (position) {
                        let longitude = position.coords.longitude;
                        let latitude = position.coords.latitude;
                        sessionStorage.setItem("longitude",longitude);
                        sessionStorage.setItem("latitude",latitude);
                    });
                }
            },
            // 排序其他字段
            sortOtherField(event){
                var _this = $(event.currentTarget);
                var checked = _this.attr("checked");
                var otherField = _this.attr("other-field");
                if (checked == 'checked') {
                    this.carSearchQuery[otherField] = 1;
                } else {
                    this.carSearchQuery[otherField] = 0;
                }
                this.carSearchQuery.currentPage = 1;
                this.getCars();
            },
            // 排序
            changeSort(event) {
                var _this = $(event.currentTarget);
                var sortField = _this.attr("sort-field");
                var sortType = _this.attr("sort-type");
                this.carSearchQuery.sortField = sortField;
                this.carSearchQuery.sortType = sortType;
                this.carSearchQuery.currentPage = 1;
                switch (sortField) {
                    case "costprice":
                    case "reigstertime":
                    case "mileage":
                        this.sortIcon[sortField] = (sortType === "asc") ? "up" : "down";
                        _this.attr("sort-type", (sortType === "asc") ? "desc" : "asc")
                        break;
                }
                this.getCars();
            },
            // 根据车龄筛选
            changeCarAge(carAge, carAgeType) {
                this.carSearchQuery.carAge = carAge;
                this.carSearchQuery.carAgeType = carAgeType;
                this.carSearchQuery.currentPage = 1;
                this.getCars();
            },
            // 自己输入价格筛选
            searchPrice() {
                var minPrice = this.carSearchQuery.minPrice;
                var maxPrice = this.carSearchQuery.maxPrice;
                if (Object.is(minPrice, null)) {
                    alert("请输入最小价格");
                    return;
                }
                minPrice = Number.parseInt(minPrice);
                maxPrice = Number.parseInt(maxPrice);
                if (Object.is(minPrice, NaN) || Object.is(maxPrice, NaN)) {
                    alert("请输入正确的价格");
                    this.carSearchQuery.minPrice = null;
                    this.carSearchQuery.maxPrice = null;
                    return;
                }
                if (minPrice < 0) {
                    alert("最小价格不能小于0");
                    this.carSearchQuery.minPrice = 0;
                    return;
                }
                this.carSearchQuery.currentPage = 1;
                this.getCars();
            },
            // 根据价格筛选
            changePrice(minPrice, maxPrice) {
                this.carSearchQuery.minPrice = minPrice;
                this.carSearchQuery.maxPrice = maxPrice;
                this.carSearchQuery.currentPage = 1;
                this.getCars();
            },
            searchShop(event){
                let shopId = $(event.currentTarget).attr("shop-id");
                if (!Object.is(shopId, null)) {
                    this.carSearchQuery.shopId = shopId;
                } else {
                    this.carSearchQuery.shopId = null;
                }
                this.carSearchQuery.currentPage = 1;
                this.getCars();
            },
            // 根据车辆类型筛选
            checkCarType(event) {
                let carTypeId = $(event.currentTarget).attr("car-type");
                if (!Object.is(carTypeId, null)) {
                    this.carSearchQuery.carType = $(event.currentTarget).attr("car-type");
                } else {
                    this.carSearchQuery.carType = null;
                }
                this.carSearchQuery.currentPage = 1;
                this.getCars();
            },
            // 分页切换
            changePage(index) {
                this.carSearchQuery.currentPage = index;
                this.getCars();
            },
            // 查询所有数据
            getCars() {
                this.$http.post("/carSearch", this.carSearchQuery)
                    .then(res => {
                        res = res.data;
                        if (res.success) {
                            this.pageInfo = res.data;
                            this.pageInfo.totalPage = Math.ceil(res.data.total / this.carSearchQuery.pageSize);
                            this.pageInfo.data = res.data.data;
                        }
                    })
                    .catch(err => {
                        err = err.data;
                        alert(err.msg)
                    })
            },
            getPathParam(){
                var href = location.href;
                if (href.indexOf("?")==-1){
                    return;
                }
                var pathParam = href.split("?")[1];
                // 判断路径中有一个参数还是两个参数
                if (pathParam.indexOf("&") > -1){
                    //路径中有两个参数
                    var params = pathParam.split("&");
                    for (let i = 0; i < params.length; i++) {
                        var obj = params[i].split("=");
                        var field = obj[0];
                        var value = obj[1];
                        this.carSearchQuery[field] = value;
                    }
                }else{
                    // 路径中只有一个参数
                    var param = pathParam.split("=");
                    var field = param[0];
                    var value = param[1];
                    this.carSearchQuery[field] = value;
                }
            }
        },
        mounted() {
            this.getPathParam();
            this.getCars();
        },
        filters: {
            dateFormat(date) {// 计算属性本质是一个方法，但是必须返回结果
                const d = new Date(date);
                return d.getFullYear() + "年" + (d.getMonth() + 1) + "月" + d.getDate() + "日";
            },
            addressFormat(address){
                if (address != null && address.length > 3){
                    return address.split("市")[0] + "市";
                }
                return "地址错误";
            }
        }
    })
</script>
</body>
</html>